<script setup lang="ts">
// 组件接口
const props = defineProps({
  openFlag: {
    type: Boolean,
    required: false,
    default: false,
  },
});

// ref
// 控制台翻盖flag
</script>

<template>
  <div class="CtlCard1">
    <transition name="fade">
      <CoverCard1 :class="'CtlCard1_cMode'" v-if="!props.openFlag" />
    </transition>
    <transition name="fade">
      <CtlCard2 v-if="props.openFlag" />
    </transition>
  </div>
</template>

<style scoped>
.CtlCard1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.CtlCard1_cMode {
  position: absolute;
  z-index: 1;
}
/* transition 属性name 固有格式.[name]-enter-active*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
